<template>
  <el-row>
    <el-form label-width="120px" :model="ali" :rules="ali_rules" ref="ali" :disabled="chennel_status !== 100 ? false : true" size="small">
      <el-form-item label="通道状态：">
        <span class="fz12" :class="chennel_status === -200 ? 'err' : chennel_status === 200 ? 'succ' : 'tip'">{{ chennel_status === -200 ? '审核未通过' : chennel_status === 0 ? '未提交' : chennel_status ===  100 ? '待审核' : chennel_status === 200 ? '审核通过': '无' }}</span>
      </el-form-item>
      <el-form-item label="错误信息：" v-if="chennel_status === -200">
        <span class="fz12 err">{{ error_info }}</span>
      </el-form-item>
      <el-form-item label="支付宝账号：" prop="ali_count">
        <el-input class="w240" v-model="ali.ali_count"></el-input>
        <div class="fz12">商户支付宝账号，仅做展示用，<span class="err">并非收款到账账号</span></div>
      </el-form-item>
      <el-form-item label="支付宝授权PID：">
        <el-input class="w240" v-model="ali.ali_pid"></el-input>
        <div class="fz12">商户在商户后台授权后，将获取此信息。<span class="err">收款将进入PID所属的支付宝账户中</span></div>
      </el-form-item>
      <el-form-item label="商家结算周期：" required>
        <el-button type="warning" size="small">D+0</el-button>
      </el-form-item>
      <el-form-item label="">
        <el-radio-group v-model="ali.channel_type" @change="handleZeroRate">
          <el-radio :label="0">普通</el-radio>
          <el-radio :label="1">蓝海行动</el-radio>
          <el-radio :label="2">公益类</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="当前执行费率：" prop="rate">
        <el-input :disabled="ali.channel_type === 2 ? true : false" class="w240" v-model.number="ali.rate" maxlength="5"></el-input>%
      </el-form-item>
      <el-form-item label="到期时间：" v-if="ali.channel_type !== 2">
        <el-date-picker class="w240" type="date" v-model="ali.expire_time" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="到期执行费率：" prop="expire_rate" v-if="ali.expire_time">
        <el-input class="w240" v-model.number="ali.expire_rate" maxlength="5"></el-input>%
      </el-form-item>
      <el-form-item v-if="chennel_status !== 100">
        <el-button type="primary" size="small" @click="handleClickAliSubmit" :loading="btnSubmit">确认保存</el-button>    
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
import { merchantChannelAliUpdate, merchantChannelAliQuery } from '@/api/shop'

export default {
  data() {
    return {
      error_info: '',
      chennel_status: '',
      btnSubmit: false,
      ali_category: [],
      ali: {
        ali_pid: '',
        ali_count: '',
        balance_type: 'd0',
        rate: '',
        expire_time: '',
        expire_rate: '',
        channel_type: 0
      },
      ali_rules: {
        ali_pid: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        ali_count: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        rate: [{ required: true, trigger: 'blur', type: 'number', message: '费率格式不对哦~' }],
        expire_rate: [{ required: true, trigger: 'blur', type: 'number', message: '费率格式不对哦~' }]
      }
    }
  },
  methods: {
    handleClickAliSubmit() {
      this.$refs['ali'].validate((valid) => {
        if (valid) {
          this.btnSubmit = true
          merchantChannelAliUpdate(this.$route.query.merchant_num, this.ali).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success('申请成功，请耐心等待审核~')
              this.chennel_status = 100
              this.btnSubmit = false
            } else {
              this.$message.error(res.data.errorMsg)
              this.btnSubmit = false
            }
          })
        }
      })
    },
    handleZeroRate(v) {
      this.ali.expire_time = ''
      this.ali.expire_rate = ''
      v === 2 ? this.ali.rate = 0 : this.ali.rate = ''
    }
  },
  created() {
    merchantChannelAliQuery(this.$route.query.merchant_num).then(res => {
      if (res.data.errorCode === 0) {
        this.ali.ali_count = res.data.result.ali_count
        this.ali.ali_pid = res.data.result.ali_pid
        this.ali.balance_type = res.data.result.balance_type
        this.ali.channel_type = res.data.result.channel_type
        this.ali.expire_rate = Number(res.data.result.expire_rate)
        this.ali.expire_time = res.data.result.expire_time
        this.ali.rate = Number(res.data.result.rate)
        this.error_info = res.data.result.error_info
        this.chennel_status = res.data.result.channel_status
      } else {
        this.chennel_status = 0
      }
    })
  }
}
</script>